<template>
	<view class="an-bady-pad">
		<!-- 评论区 start -->
		<view class="uni-comment">
			<view class="uni-comment-list" v-for="item in list" :key="item.id">
				<view class="uni-comment-face">
					<image class="an-user-img" v-if="item.type == 2" :src="userImg" mode="widthFix"></image>
					<image class="an-user-img" v-else-if="item.type == 1" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
					<image class="an-user-img" v-else :src="item.avatarurl" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{item.user_name}}</text>
					</view>
					<view class="uni-comment-content">{{item.msg}}</view>
					<view class="uni-comment-date">
						<view>{{item.create_time}}</view>
						<view class="uni-comment-replay-btn" @click="deleteMsg(item.id)" v-if="isDelete(item.type)">删除</view>
					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType"></uni-load-more>
		</view>
		<!-- 评论区 end -->
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import defaultImg from '@/static/img/userImg.jpg'
	export default {
		computed: {
		    ...mapState(['hasLogin','userInfo'])
		},
		components: {
			uniLoadMore
		},
		data() {
			return {
				userImg: defaultImg,
				postData:{
					page: 1,
					perpage: 10,
				},
				list:[],
				total: 0,
				loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
			}
		},
		onReady(){
			this.getList(1)
		},
		methods: {
			isDelete(type){
				if(type == 3 && this.hasLogin){ //登录用户能删除匿名留言
					return true;
				}else if(this.userInfo.grade == '3'){	//超级管理员权限
					return true;
				}else{
					return false;
				}
			},
			getList(page){
				this.loadingType = 1
				if(page){
					this.postData.page = page
				}
				if(this.postData.page === 1){
					this.list = []
				}
				this.$api.getMsg(this.postData).then(res=>{
					this.list.push(...res.list); 
					this.total = res.total
					this.loadingType = 0
				})
			},
			deleteMsg(id){
				let nd = {
					ids: id
				}
				this.$api.deleteMsg(nd).then(res=>{
					uni.showToast({icon: 'success', title: '操作成功！'});
					this.getList(1)
				})
			},
			onReachBottom() {	// 页面到底 触发
				if (this.loadingType !== 0) {
					return;
				}
				if(Math.ceil(this.total/this.postData.perpage)>this.postData.page && this.total != 0 ){
					this.postData.page += 1
					this.getList()
				}else{
					this.loadingType = 2
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.an-bady-pad{
		.uni-comment-replay-btn{
			color:brown !important;
		}
	}
	.an-user-img{
		width: 35px; 
		height: 35px; 
		background-color: #b7b7b7;
	}
</style>

